<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>

    <!-- 使用双大括号(Mustache 语法) "{{}}" 是最基本的文本插值方法, 它会自动将我们双向绑定的数据实时显示出来 -->
    <div id="app">

        {{ date }}

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                date: new Date()
            },
            mounted: function () {

                var _this = this;   // 声明一个变量指向 Vue 实例 this, 保证作用域一致

                this.timer = setInterval(function () {
                    _this.date = new Date();    // 修改数据 date
                }, 1000)
            },

            beforeDestroy: function () {
                if(this.timer){
                    clearInterval(this.timer);  // 在 Vue 实例销毁前,清除我们的定时器
                }
            }

        });

    </script>

</body>
</html>